import React, { Component } from 'react';

/* 
    跨组件传值

*/

class Dome extends Component{
    state ={
        msg:"🍉"
    }
    /* 5.Dome组件传给组件Test组件  执行父组件传来的方法 */
  handleClick =(params) => {
      this.props.handlePClick(this.state.msg)
  }
  render(){
    return <div>
      <h1>Dome组件</h1>
     <h1>{this.props.children}</h1>
     {/* 5.1 定义Demo组件触发事件方法 */}
     <button onClick={this.handleClick}>传值给兄弟 Test</button>
    </div>
  }
}

class DeomChild extends Component{
  render(){
    return <h1>DemoChiold</h1>
  }
}

class Test extends Component{
  render(){
    return <div>
       <h1>Test组件</h1>
       {/* 6.Test组件中通过 props.title 访问到Demo组件传来的值 */}
       <h1>接收到兄弟Demo传来的值:{this.props.title}</h1>
    </div>
  }
}

class App extends Component {
  /* 1.定义title属性 ，用来实现兄弟传值 */
  state ={
    title:'',
  }
  /* 2.定义一个父组件方法 传给Demo组件调用 */
  handlePClick =(params) => {
    this.setState({
      title:params
    })
  }
  render() {
    return (
      <div>
        {/* 3.将父组件中方法传给Demo组件 */}
        <Dome handlePClick ={this.handlePClick}>
        <DeomChild></DeomChild>
        </Dome>
        {/* 4.将父组件中的title  传给Test 组件*/}
        <Test title={this.state.title}></Test>
      </div>
    );
  }
}

export default App;
